  <template>
    <!-- 通用表单对话框组件 -->
    <el-dialog
      draggable
      :title="dialogTitle"
      :model-value="dialogVisible"
      :width="dialogWidth"
      :append-to-body="appendToBody"
      :destroy-on-close="destroyOnClose"
      :before-close="handleBeforeClose"
      class="common-form-dialog"
      @close="handleClose"
    >
      <!-- 表单区域：通过插槽允许外部自定义表单项 -->
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        :label-width="labelWidth"
        class="common-form"
      >
        <!-- 表单项插槽：外部传入具体表单内容（如输入框、下拉框等） -->
        <slot name="formItems"></slot>
      </el-form>

      <!-- 底部按钮区域：支持自定义按钮，默认提供「取消/确定」 -->
      <template #footer>
        <div class="dialog-footer">
          <slot name="footer">
            <!-- 默认按钮组 -->
            <el-button @click="handleCancel">取 消</el-button>
            <el-button
              type="primary"
              :loading="submitLoading"
              @click="handleSubmit"
            >
              确 定
            </el-button>
          </slot>
        </div>
      </template>
    </el-dialog>
  </template>

  <script setup>
  import { ref, watch, defineProps, defineEmits, toRefs } from "vue";
  import { ElForm } from "element-plus";

  // 1. 定义组件接收的外部参数（props）
  const props = defineProps({
    // 对话框标题（如“新增标签”“修改标签”）
    dialogTitle: {
      type: String,
      required: true,
      default: "编辑信息",
    },
    // 对话框是否显示（双向绑定）
    dialogVisible: {
      type: Boolean,
      required: true,
      default: false,
    },
    // 表单数据（外部传入的表单对象，如 tagForm）
    formData: {
      type: Object,
      required: true,
      default: () => ({}),
    },
    // 表单校验规则（外部传入，如 rules）
    formRules: {
      type: Object,
      required: true,
      default: () => ({}),
    },
    // 对话框宽度
    dialogWidth: {
      type: String,
      default: "600px",
    },
    // 表单标签宽度
    labelWidth: {
      type: String,
      default: "160px",
    },
    // 是否追加到 body 元素（避免父组件样式影响）
    appendToBody: {
      type: Boolean,
      default: true,
    },
    // 关闭时是否销毁组件（避免数据残留）
    destroyOnClose: {
      type: Boolean,
      default: true,
    },
    // 提交按钮加载状态（外部控制，如提交接口时设为 true）
    submitLoading: {
      type: Boolean,
      default: false,
    },
  });

  // 2. 定义组件对外触发的事件（emits）
  const emit = defineEmits([
    // 对话框关闭时触发（用于外部重置状态）
    "close",
    // 取消按钮点击时触发
    "cancel",
    // 确定按钮点击且表单校验通过时触发（返回表单数据）
    "submit",
    //对话框新增场站
    "add",
    // 对话框关闭前触发（用于拦截关闭，如“是否放弃修改”）
    "before-close",
  ]);

  // 3. 表单实例引用（用于外部调用表单方法，如重置）
  const formRef = ref();

  // 4. 监听 dialogVisible 变化：外部关闭时同步重置表单
  watch(
    () => props.dialogVisible,
    (newVal) => {
      if (!newVal && formRef.value) {
        // 重置表单（清空校验状态，保留数据）
        formRef.value.clearValidate();
      }
    },
    { immediate: true }
  );

  // 5. 取消按钮逻辑
  const handleCancel = () => {
    emit("cancel");
    // 触发关闭（外部需监听 close 事件更新 dialogVisible）
  };
  const handleClose = () => {

    emit("close");
  };

  // 6. 确定按钮逻辑（表单校验 + 触发提交事件）
  const handleSubmit = async () => {
    if (!formRef.value) return;

    try {
      // 表单校验
      await formRef.value.validate();
      // 校验通过：触发 submit 事件，传递当前表单数据
      emit("submit", props.formData);
    } catch (error) {
      // 校验失败：不做处理（Element Plus 会自动提示错误）
      console.log("表单校验失败：", error);
    }
  };

  // 7. 对话框关闭前逻辑（拦截关闭，如提示“是否放弃修改”）
  const handleBeforeClose = () => {
      
    // 触发 before-close 事件，外部决定是否允许关闭
    emit("before-close");
  };

  // 8. 对外暴露表单方法（如外部需要手动重置表单）
  defineExpose({
    // 重置表单（清空数据 + 清空校验）
    resetForm: () => {
      if (formRef.value) {
        formRef.value.resetFields();
      }
    },
    // 手动触发表单校验
    validateForm: () => {
      return formRef.value?.validate();
    },
  });
  </script>

  <style scoped>
  .common-form-dialog {
    --el-dialog-padding-primary: 20px;
  }
  .common-form {
    margin-bottom: 10px;
  }
  .dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }
  </style>